<!-- 订单管理 -->
<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="订单号">
        <el-input v-model="formInline.orderNo" placeholder="请输入订单号" clearable />
      </el-form-item>
      <el-form-item label="收货人">
        <el-input v-model="formInline.consignee" placeholder="请输入收货人" clearable />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="formInline.orderState" placeholder="请选择订单状态" clearable>
          <el-option label="已受理" value="已受理" />
          <el-option label="派送中" value="派送中" />
          <el-option label="已完成" value="已完成" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间">
        <el-date-picker v-model="formInline.date" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
          start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList(currentPage1, pageSize1)">搜索</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
        header-row-class-name="tableHeader">
        <el-table-column prop="orderNo" label="订单号" />
        <el-table-column prop="orderTime" label="下单时间" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="consignee" label="收货人" />
        <el-table-column prop="deliverAddress" label="送货地址" />
        <el-table-column prop="deliveryTime" label="送达时间" />
        <el-table-column prop="remarks" label="备注" />
        <el-table-column prop="orderAmount" label="订单金额" />
        <el-table-column prop="orderState" label="订单状态" />
        <el-table-column label="操作">
          <template #default="scope">
            <div class="cz"><span @click="goInfor(scope.row.id)">查看</span><span>编辑</span></div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="total" @changePage="getList" style="margin-top: 5px;" />
    </div>
  </div>
</template>

<script setup>
import Pagination from '@/views/home/component/Pagination.vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getOrderList } from '@/api/order'
import moment from 'moment'//时间处理插件
const router = useRouter();
const tableData = ref([
{
  id:null,
  orderNo: '',
  orderTime: '',
  phone: '',
  consignee: '',
  deliverAddress: '',
  deliveryTime: '',
  remarks: '',
  orderAmount: '',
  orderState: '',
}
])
let currentPage1 = ref(1)
let pageSize1 = ref(5)
let total = ref(0)
// 搜索数据
const formInline = reactive({
  orderNo: '',
  consignee: '',
  phone: '',
  orderState: '',
  date: ''
})

// 获得订单列表
const getList = async (currentPage, pageSize) => {
  //保存页面信息
  currentPage1.value = currentPage;
  pageSize1.value = pageSize;
  try {
    const params = { currentPage, pageSize };
    if (formInline.orderNo || formInline.consignee || formInline.phone || formInline.orderState || formInline.date) {
      //如果有选择时间 对时间格式进行处理
      if (formInline.date) {
        // 时间处理
        const formattedDate0 = moment(formInline.date[0]).format("YYYY-MM-DD HH:mm:ss");
        const formattedDate1 = moment(formInline.date[1]).format("YYYY-MM-DD HH:mm:ss");
        // 添加 date 参数，格式为 ["2025-04-17 11:36:53","2025-04-22 11:36:53"] 后端要求
        params.date = `["${formattedDate0}","${formattedDate1}"]`;
        // 添加 date1[] 参数
        params['date1[]'] = [formattedDate0, formattedDate1];
      }
      // 将搜索数据添加到 params 中
      Object.assign(params, {
        orderNo: formInline.orderNo,
        consignee: formInline.consignee,
        phone: formInline.phone,
        orderState: formInline.orderState
      });
    }
    const res = await getOrderList(params);
    total.value = res.total;
    tableData.value = res.data;
  } catch (error) {
    console.error('请求错误:', error);
  }
};
getList(currentPage1.value, pageSize1.value)


const shortcuts = [
  {
    text: '过去5天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 5)
      return [start, end]
    },
  },
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]

// 动态给类名
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 1) {
    return 'warning-row'
  }
  return 'success-row'
}

//编辑订单
const goInfor = (id) => {
  console.log(id)
  router.push({
    path: '/orderInfor',
    query: {
      id: id,
    },
  })
}
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.block:last-child {
  border-right: none;
}

.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.tableHeader {
  height: 30px;
  color: #909399;
  font-size: 14px;
  font-weight: normal;
}

.header-row {
  height: 30px;
}

.el-table__cell {
  height: 30px;
}

:deep(.el-table .warning-row) {
  --el-table-tr-bg-color: skyblue;
}

:deep(.el-table .success-row) {
  --el-table-tr-bg-color: #eee8aa;
}

.cz {
  span {
    color: #409Eff;
    width: 28px;
    height: 16px;
    cursor: pointer;
    padding: 0 4px;
  }

  span:hover {
    color: #66b1ff;
    ;
  }
}
</style>